<template>
  <div>
    <Table ref="table" :columns="columns" :fuc="page" :formState="formState" @reset="reset">
      <template #form>
        <FormItem label="标题" name="title">
          <Input v-model:value="formState.title" allow-clear placeholder="博客名" />
        </FormItem>
      </template>
      <template #toolBtn>
        <Button type="primary" @click="onAddBtn">添加</Button>
      </template>
      <template #operation="{ record }">
        <Space>
          <a @click="onEditBtn(record)">编辑</a>
        </Space>
      </template>
    </Table>

    <!-- 新增 -->
    <Drawer
      title="新增博客"
      placement="right"
      :visible="addVisible"
      @close="onAddClose"
      width="1000"
    >
      <Add v-if="addVisible" @on-success="handleSuccess" />
    </Drawer>

    <Drawer
      title="更新博客"
      placement="right"
      :visible="editVisible"
      @close="onEditClose"
      width="1000"
    >
      <Update v-if="editVisible" @on-success="handleEditSuccess" :id="blogId" />
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { page } from '/@/api/blog'
  import { Table } from '/@/components/Table'
  import { FormItem, Input, Button, Drawer, Space } from 'ant-design-vue'
  import Add from './Add.vue'
  import Update from './Update.vue'

  const table: any = ref(null)

  const columns = [
    {
      title: '博客编号',
      dataIndex: 'id',
    },
    {
      title: '博客名',
      dataIndex: 'title',
    },
    {
      title: '浏览数',
      dataIndex: 'viewCount',
    },
    {
      title: '点赞数',
      dataIndex: 'likeCount',
    },
    {
      title: '收藏数',
      dataIndex: 'collectCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
    },
  ]

  const formState = ref({
    title: '',
  })

  const reset = () => {
    formState.value = {
      title: '',
    }
  }

  const addVisible = ref(false)
  const onAddBtn = () => {
    addVisible.value = true
  }
  const onAddClose = () => (addVisible.value = false)
  const handleSuccess = () => {
    onAddClose()
    table.value.handleQuery()
  }

  const blogId = ref(0)
  const editVisible = ref(false)
  const onEditBtn = (record) => {
    blogId.value = record.id
    editVisible.value = true
  }
  const onEditClose = () => (editVisible.value = false)
  const handleEditSuccess = () => {
    onEditClose()
    table.value.handleQuery()
  }
</script>

<style scoped>
  .avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
</style>
